import React, { PureComponent, Fragment } from 'react';
import { Table, Modal, Icon, Divider, Popconfirm, message } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import styles from './YlybTable.less';
import Ellipsis from '@/components/Ellipsis';

import YlybEditFm from './YlybEditForm';

//权限控制
import { getAuthority } from '@/utils/authority';
import RenderAuthorized from '@/components/Authorized';
const Authorized = RenderAuthorized(getAuthority());

@connect(({ global }) => ({
  currentUrl: global.currentUrl,
  elementAuth: global.elementAuth,
}))
class YlybTable extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      showEditMd: false, //编辑
    };
    this.dispatch = this.props.dispatch;
    this.user_id = sessionStorage.getItem('user_id');

    this.onChange = this.onChange.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.clickItem = this.clickItem.bind(this);
    this.handleRevert = this.handleRevert.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  componentDidMount() {}

  onChange(pagination, filters, sorter) {
    var qc = this.props.queryCon;
    this.pg['current'] = pagination.current;
    this.props.GetQueryProblem({
      pageindex: this.pg['current'],
      companyid: qc['companyid'],
      type: qc['type'],
      ztype: qc['ztype'],
      source: qc['source'],
      status: qc['status'],
      bovertime: qc['bovertime'],
      eovertime: qc['eovertime'],
      btime: qc['btime'],
      etime: qc['etime'],
    });
  }

  handleCancel(v) {
    var obj = {};
    obj[v] = false;
    this.setState(obj);
  }
  handleEdit = record => {
    this.setState({
      showEditMd: true,
      modalT: '编辑',
      record: record,
    });
  };
  handleRevert = record => {
    const hide = message.loading('正在回退...', 0);
    this.dispatch({
      type: 'maintain/fetchYlybEditRollback',
      payload: { id: record.id },
      callback: response => {
        hide();
        if (response.status) {
          message.success('回退成功');
        } else {
          message.error('回退失败');
          console.log(response.ErrorMessage);
        }
        this.props.GetQueryModelData(this.props.queryCon);
      },
    });
  };
  handleDelete = record => {
    const hide = message.loading('正在删除...', 0);
    this.dispatch({
      type: 'maintain/fetchYlybDelete',
      payload: { id: record.id },
      callback: response => {
        hide();
        if (response.status) {
          message.success('删除成功');
          this.props.GetQueryProblem(this.props.queryCon);
        } else {
          message.error('删除失败');
          console.log(response.ErrorMessage);
        }
      },
    });
  };

  //单击item
  clickItem(item) {
    this.props.clickItem(item);
  }

  //权限控制
  getAuth = () => {
    const { dispatch, currentUrl } = this.props;
    dispatch({
      type: 'global/fetchAuthorityElements',
      payload: { url: currentUrl },
    });
  };

  render() {
    var p = this.props;
    var s = this.state;
    const { elementAuth } = this.props;
    let a = getAuthority();
    let cols = [
      {
        title: '年月',
        dataIndex: 'yf',
        key: 'yf',
        width: 80,
        render: (text, record, index) => record.nf + '-' + record.yf,
      },
      {
        title: '道路名称',
        dataIndex: 'dlmc',
        key: 'dlmc',
        render: text => (
          <Ellipsis length={5} tooltip>
            {text}
          </Ellipsis>
        ),
      },
      {
        title: '市 政 设 施 类 别',
        children: [
          {
            title: '人行道板',
            children: [
              {
                title: (
                  <div>
                    20*10*6
                    <br />
                    (m2)
                  </div>
                ),
                dataIndex: 'rxdgb20',
                key: 'rxdgb20',
                // width: 80,
              },
              {
                title: (
                  <div>
                    25*25*5
                    <br />
                    (m2)
                  </div>
                ),
                dataIndex: 'rxdgb25',
                key: 'rxdgb25',
                // width: 80,
              },
              {
                title: (
                  <div>
                    花岗岩
                    <br />
                    (m2)
                  </div>
                ),
                dataIndex: 'rxdgbhgy',
                key: 'rxdgbhgy',
                // width: 80,
              },
            ],
          },
          // {
          //   title: '雨水收集篦子',
          //   children: [
          //     {
          //       title: (
          //         <div>
          //           380*680
          //           <br />
          //           (只)
          //         </div>
          //       ),
          //       dataIndex: 'yssjlz1',
          //       key: 'yssjlz1',
          //       // width: 80,
          //     },
          //     {
          //       title: (
          //         <div>
          //           380*680
          //           <br />
          //           (套)
          //         </div>
          //       ),
          //       dataIndex: 'yssjlz2',
          //       key: 'yssjlz2',
          //       // width: 80,
          //     },
          //   ],
          // },
          {
            title: '雨水井',
            children: [
              // {
              //   title: (
              //     <div>
              //       DN700
              //       <br />
              //       (只)
              //     </div>
              //   ),
              //   dataIndex: 'ysjdn7001',
              //   key: 'ysjdn7001',
              //   // width: 80,
              // },
              {
                title: (
                  <div>
                    DN700
                    <br />
                    (套)
                  </div>
                ),
                dataIndex: 'ysjdn7002',
                key: 'ysjdn7002',
                // width: 80,
              },
              {
                title: (
                  <div>
                    铸铁边井
                    <br />
                    (套)
                  </div>
                ),
                dataIndex: 'ysjztbj',
                key: 'ysjztbj',
                // width: 85,
              },
              {
                title: (
                  <div>
                    防沉降球墨井盖
                    <br />
                    (套)
                  </div>
                ),
                dataIndex: 'ysjfcjqmjg',
                key: 'ysjfcjqmjg',
                // width: 80,
              },
            ],
          },
        ],
      },

      {
        title: (
          <div>
            侧平石
            <br />
            (m)
          </div>
        ),
        dataIndex: 'cps',
        key: 'cps',
        // width: 80,
      },
      {
        title: (
          <div>
            沥青路面
            <br />
            (m2)
          </div>
        ),
        dataIndex: 'lqlm',
        key: 'lqlm',
        // width: 80,
      },
      {
        title: (
          <div>
            道路划线
            <br />
            (m2)
          </div>
        ),
        dataIndex: 'dlhx',
        key: 'dlhx',
      },
      {
        title: (
          <div>
            水泥路面
            <br />
            (m2)
          </div>
        ),
        dataIndex: 'snlm',
        key: 'snlm',
        // width: 80,
      },
      {
        title: (
          <div>
            路面灌缝
            <br />
            (m)
          </div>
        ),
        dataIndex: 'lmgf',
        key: 'lmgf',
        // width: 80,
      },
      {
        title: <div>积水点整治</div>,
        dataIndex: 'jsdzz',
        key: 'jsdzz',
        // width: 80,
      },
      {
        title: (
          <div>
            零星维修
            <br />
            (m2)
          </div>
        ),
        dataIndex: 'lxwx',
        key: 'lxwx',
        // width: 80,
      },
      {
        title: '备 注',
        children: [
          {
            title: '养护方式有维修、更换、抬升、清扫等，表中未有项目请在备注中注明。',
            dataIndex: 'bz',
            key: 'bz',
            render: text => (
              <Ellipsis length={6} tooltip>
                {text}
              </Ellipsis>
            ),
            width: 200,
          },
        ],
      },

      {
        title: '操作',
        key: 'action',
        // width: 150,
        render: (text, record) => {
          var r = (
            <Authorized authority={elementAuth['btnReturn']}>
              <span>
                <a href="javascrips:;" onClick={this.handleRevert.bind(this, record)} title="回退">
                  <Icon type="rollback" />
                </a>
              </span>
            </Authorized>
          );
          if (record.sfth == '1') {
            // 1正常
          } else {
            // 2打回来
            r = (
              <Authorized authority={elementAuth['btnEdit']}>
                <span>
                  <a href="javascrips:;" onClick={this.handleEdit.bind(this, record)} title="编辑">
                    <Icon type="edit" />编辑
                  </a>
                  <Divider type="vertical" />
                  <Popconfirm
                    title="确定删除?"
                    onConfirm={this.handleDelete.bind(this, record)}
                    title="删除"
                  >
                    <a href="javascript:;">
                      <Icon type="delete" />删除
                    </a>
                  </Popconfirm>
                </span>
              </Authorized>
            );
          }
          return r;
        },
      },
    ];

    const BodyWrapper = props => {
      return (
        <tbody {...props}>
          <React.Fragment>
            {props.children}
            <tr className="ant-table-row">
              <td>合计</td>
              <td />
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_rxdgb20 : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_rxdgb25 : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_rxdgbhgy : null}</td>
              {/* <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_yssjlz1 : null}</td> */}
              {/* <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_yssjlz2 : null}</td> */}
              {/* <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_ysjdn7001 : null}</td> */}
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_ysjdn7002 : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_ysjztbj : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_ysjfcjqmjg : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_cps : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_lqlm : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_dlhx : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_snlm : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_lmgf : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_jsdzz : null}</td>
              <td>{p.sjsbTbSum ? p.sjsbTbSum.sum_lxwx : null}</td>
              <td />
              <td />
            </tr>
          </React.Fragment>
        </tbody>
      );
    };

    return (
      <div>
        <Table
          className={styles.ylybTable}
          dataSource={p.sjsbTbData}
          components={
            p.sjsbTbSum.data && p.sjsbTbSum.data.length != 0
              ? { body: { wrapper: BodyWrapper } }
              : ''
          }
          columns={cols}
          bordered
          // onChange={this.onChange}
          // pagination={this.pg}
          // onRow={record => {
          //   return {
          //     onClick: this.clickItem.bind(this, record),
          //   };
          // }}
        />

        {s.showEditMd ? (
          <Modal
            title={s.modalT}
            visible={true}
            onCancel={e => this.handleCancel('showEditMd')}
            footer={null}
            bodyStyle={{ padding: 0 }}
            width={800}
          >
            <div className="modal_con_se">
              <YlybEditFm
                parent={this}
                record={s.record}
                modalT={s.modalT}
                modalName={'showEditMd'}
                handleCancel={this.handleCancel}
                GetQueryModelData={p.GetQueryModelData}
                queryCon={p.queryCon}
              />
            </div>
          </Modal>
        ) : null}
      </div>
    );
  }
}

export default YlybTable;
